<template>
  <!-- 馈电异常 -->
  <div style="padding: 20px">
    <el-form inline :model="form" ref="form" label-width="120px" size="mini">
      <!-- <el-form-item label="传感器监测地点" prop="ssTransducerPoint">
        <el-input
          placeholder="请输入传感器监测地点"
          v-model="form.ssTransducerPoint"
        ></el-input>
      </el-form-item> -->
      <el-form-item label="开始时间" prop="startTime">
        <el-date-picker
          v-model="form.startTime"
          type="date"
          placeholder="选择日期"
          value-format="yyyy-MM-dd"
          :picker-options="startDatePicker"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间" prop="endTime">
        <el-date-picker
          v-model="form.endTime"
          type="date"
          placeholder="选择日期"
          value-format="yyyy-MM-dd"
          :picker-options="endDatePicker"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="处理状态" prop="status">
        <el-select v-model="form.status" placeholder="请选择状态">
          <el-option label="未处理" value="0"></el-option>
          <el-option label="已处理" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-button
        type="primary"
        size="mini"
        icon="el-icon-search"
        @click="handleQuery"
        >搜索</el-button
      >
      <el-button size="mini" icon="el-icon-refresh" @click="resetForm('form')"
        >重置</el-button
      >
    </el-form>
    <el-table :header-cell-style="thaderBack" border :data="tableData">
      <el-table-column label="序号" width="80" align="center">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="ssStationCode"
        label="分站编码"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="ssTransducerCode"
        label="传感器编码"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="ssTransducerPoint"
        label="传感器监测地点"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="ssTransducerTypeName"
        label="传感器类型"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="ssTransducerName"
        label="传感器名称"
        show-overflow-tooltip
      >
      </el-table-column>

      <el-table-column
        prop="ssAlarmStime"
        label="报警开始时间"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="ssAlarmEtime"
        label="报警结束时间"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="ssDealMeasure"
        label="处理措施"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="submitState"
        label="措施状态"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <span>
            {{ scope.row.submitState === 0 ? '未处理' : '已处理' }}</span
          ></template
        >
      </el-table-column>
      <el-table-column
        label="操作"
        align="left"
        class-name="small-padding fixed-width"
        width="200"
      >
        <template slot-scope="scope">
          <el-button type="text" size="mini" @click="handleFile(scope.row)"
            ><i class="el-icon-goods"></i>生成文件</el-button
          >
          <el-button type="text" size="mini" @click="handleUpdate(scope.row)"
            ><i class="el-icon-document"></i>更新</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="config.page"
      :page-size="config.limit"
      layout="total,prev, pager, next, jumper"
      :total="total"
      class="pager"
    ></el-pagination>
    <el-dialog width="30%" title="更新" :visible.sync="isShow">
      <el-form
        ref="FormDetails"
        :model="FormDetails"
        label-width="120px"
        :rules="rules"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item label="处置人姓名" prop="dealPerson">
              <el-input
                v-model.trim="FormDetails.dealPerson"
                placeholder="请输入处置人姓名"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="异常处置时间" prop="dealTime">
              <el-date-picker
                v-model="FormDetails.dealTime"
                type="datetime"
                placeholder="选择日期"
                value-format="yyyy-MM-dd HH:mm:ss"
                :picker-options="startDatePicker"
                style="width: 415px"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="异常处理措施" prop="ycMeasure">
              <el-input
                v-model.trim="FormDetails.ycMeasure"
                placeholder="请输入异常处理措施"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="异常发生原因" prop="ycReason">
              <el-input
                v-model.trim="FormDetails.ycReason"
                placeholder="请输入异常发生原因"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="现场异常类型" prop="ycType">
              <el-input
                v-model.trim="FormDetails.ycType"
                placeholder="请输入现场异常类型"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24" style="display: none">
            <el-form-item label="ID" prop="id">
              <el-input
                v-model.trim="FormDetails.id"
                placeholder="ID"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer" align="center">
        <el-button type="primary" @click="submitSend">确 定</el-button>
        <el-button @click="closeDetails" type="button">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      config: {
        page: 1,
        limit: 10
      },
      total: 0,
      loading: false,
      tableData: [],
      isShow: false,
      form: {
        // ssTransducerPoint: '',
        startTime: '',
        endTime: '',
        status: ''
      },
      FormDetails: {
        dealPerson: null,
        dealTag: 'CZ',
        dealTime: null,
        ycMeasure: null,
        ycReason: null,
        ycType: null,
        id: ''
      },
      startDatePicker: null,
      endDatePicker: null,
      rules: {
        dealPerson: [
          { required: true, message: '请输入处置人姓名', trigger: 'blur' }
        ],
        dealTime: [
          { required: true, message: '请输入异常处置时间', trigger: 'blur' }
        ],
        ycMeasure: [
          { required: true, message: '请输入异常处理措施', trigger: 'blur' }
        ],
        ycReason: [
          { required: true, message: '请输入异常发生原因', trigger: 'blur' }
        ],
        ycType: [
          { required: true, message: '请输入现场异常类型', trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
    this.startDatePicker = this.beginDate()
    this.endDatePicker = this.processDate()
  },
  methods: {
    thaderBack() {
      return { background: '#F5F7FA', color: '#000' }
    },
    // 分页
    handleSizeChange(limit) {
      this.config.limit = limit
      this.getList()
    },
    handleCurrentChange(page) {
      this.config.page = page
      this.getList()
    },
    closeDetails() {
      this.resetFormDetails('FormDetails')
      this.isShow = false
    },
    beginDate() {
      const self = this
      return {
        disabledDate(time) {
          if (self.form.endTime) {
            return new Date(self.form.endTime).getTime() < time.getTime()
          }
        }
      }
    },
    processDate() {
      const self = this
      return {
        disabledDate(time) {
          if (self.form.startTime) {
            return new Date(self.form.startTime).getTime() > time.getTime()
          }
        }
      }
    },
    getList() {
      this.loading = true
      this.tableData = []
      this.$http
        .get(
          '/safe/warn/getAQKYList?pageNum=' +
            this.config.page +
            '&pageSize=' +
            this.config.limit +
            '&startTime=' +
            this.form.startTime +
            '&endTime=' +
            this.form.endTime +
            '&status=' +
            this.form.status
        )
        .then(res => {
          if (res.code == 200) {
            this.loading = false
            this.total = res.data.total
            this.tableData = res.data.data
          }
        })
    },
    // 生成文件
    handleFile(row) {
      var id = row.id
      var tableName = row.tableName
      this.$confirm('是否确认要生成文件?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$http
            .get(
              '/safe/warn/getAQKYFileGen?id=' + id + '&tableName=' + tableName
            )
            .then(res => {
              if (res.code == 200) {
                this.$message({ type: 'success', message: res.msg })
                this.getList()
              } else {
                this.$message({ type: 'error', message: res.msg })
              }
            })
        })
        .catch(function() {})
    },
    // 搜索
    handleQuery() {
      this.loadding = true
      this.config.page = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetForm(form) {
      if (this.$refs[form] !== undefined) {
        this.$refs[form].resetFields()
      }
      this.getList()
    },
    resetFormDetails(form) {
      if (this.$refs[form] !== undefined) {
        this.$refs[form].resetFields()
      }
    },
    handleUpdate(row) {
      this.resetFormDetails('FormDetails')
      this.$http
        .get(
          '/safe/warn/getAQKYDetail?id=' +
            row.id +
            '&tableName=' +
            row.tableName
        )
        .then(res => {
          if (res.code === 200) {
            this.FormDetails = res.data
            this.isShow = true
          }
        })
    },
    // 提交按钮
    submitSend: function() {
      this.$refs['FormDetails'].validate(valid => {
        if (valid) {
          this.loading = true
          this.$http
            .post('/safe/warn/getAQKYUpdate', this.FormDetails)
            .then(response => {
              this.loading = false
              if (response.code === 200) {
                this.$message({ type: 'success', message: '更新成功！' })
                this.isShow = false
                this.getList()
              }
            })
        }
      })
    }
  },
  created() {
    this.getList()
  }
}
</script>

<style lang="scss" scoped></style>
